<template>
  <div class="box">
    <div class="commonHeader header">区块链存证数据</div>
    <div class="content">
      <div class="data-box boxStyle">
        <div class="line-box">
          <i class="t-l-line"></i>
          <i class="l-t-line"></i>
        </div>
        <div class="line-box">
          <i class="t-r-line"></i>
          <i class="r-t-line"></i>
        </div>
        <div class="line-box">
          <i class="b-l-line"></i>
          <i class="l-b-line"></i>
        </div>
        <div class="line-box">
          <i class="b-r-line"></i>
          <i class="r-b-line"></i>
        </div>
        <div class="box-content">
          <div class="title">
            存证总量:
            <span class="number">{{ count }}</span>
          </div>
          <div
            id="blockchainCertificate"
            style="width:100%;height:calc(100% - 4rem);"
          ></div>
        </div>
      </div>
      <div></div>
    </div>
  </div>
</template>
<script>
import * as api from "@/api";
import echarts from "echarts";
export default {
  name: "blockchainCertificate",
  data() {
    return {
      chart: "",
      depositsList: [],
      seriesData: [],
      count: 0
    };
  },
  created() {
    this.getDepositsTypeAndNumbers();
  },
  mounted() {
    this.getDepositsTypeAndNumbers().then(() => {
      this.initChart();
    });
    // 监听浏览器尺寸变化,重新渲染图表
    window.addEventListener("resize", this.handleResize, false);
  },
  methods: {
    async getDepositsTypeAndNumbers() {
      let data = await api.getDepositsTypeAndNumbers();
      this.depositsList = data.list;
      this.count = data.sum;
      this.seriesData = this.depositsList.map(item => {
        return {
          value: item.count,
          name: item.name
        };
      });
    },
    initChart() {
      this.chart = echarts.init(
        document.getElementById("blockchainCertificate")
      );
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)"
        },
        legend: {
          orient: "horizontal",
          y: "bottom",
          textStyle: {
            color: "#fff"
          }
        },
        color:['#00B9A5', '#FC2571', '#FFCB33'],
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "60%"],
            label: {
              normal: {
                formatter: "{b}",
                borderWidth: 1
              }
            },
            data: this.seriesData
          }
        ]
      };
      this.chart.setOption(option);
    },
    handleResize() {
      this.$nextTick(() => {
        this.chart.resize();
      });
    }
  },
  destroyed() {
    // 移除监听事件
    window.removeEventListener("resize", this.handleResize, false);
  }
};
</script>
<style lang="less" scoped>
.box {
  height: 40%;
  .content {
    padding-top: 0.5rem;
    box-sizing: border-box;
    height: calc(100% - 2rem);
    .boxStyle {
      width: 100%;
      height: 100%;
      .box-content {
        padding: 1rem 0.5rem;
        height: 100%;
        .title {
          font-size: 0.8rem;
          opacity: 0.5;
        }
        .number {
          font-size: 1.2rem;
          color: #fff;
          opacity: 1;
        }
      }
    }
  }
}
</style>
